.clearfix:after {
  content: ".";
  display: block;
  clear: both;
  visibility: hidden;
  height: 0;
  font-size:0;
}
.clearfix { *zoom:1; }

.enter-enter-active, .enter-leave-active {
  transition: all .6s;
  transform: translateY(0);
  opacity: 1;
}
.enter-enter, .enter-leave-to{
  transform: translateY(100%);
  opacity: 0;
}

html,body{
  height: 100%;
  overflow: hidden;
}

.border-1px-top,
.border-1px-bottom {
  position: relative;
}

.border-1px-top:before,
.border-1px-bottom:before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  border-top: 1px solid #6666663d;
  transform: scaleY(.5);
  transform-origin: left top;
}
.border-1px-top:before{
  top: 0;
}
.border-1px-bottom:before {
  bottom: 0;
}